"use client"

import { useState } from "react"
import { useAdminStore } from "@/lib/store"
import { DataTable } from "@/components/common/data-table"
import { columns } from "./columns"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import { DeleteDialog } from "@/components/admin/delete-dialog"
import { AccessDialog } from "@/components/admin/access-dialog"
import { Access } from "@/types/admin"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function AccessPage() {
  const { accesses, addAccess, updateAccess, deleteAccess } = useAdminStore()
  
  // 对话框状态
  const [openAddEditDialog, setOpenAddEditDialog] = useState(false)
  const [selectedAccess, setSelectedAccess] = useState<Access | undefined>(undefined)
  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
  const [accessToDelete, setAccessToDelete] = useState<Access | undefined>(undefined)

  // 处理添加门禁
  const handleAddAccess = () => {
    setSelectedAccess(undefined)
    setOpenAddEditDialog(true)
  }

  // 处理编辑门禁
  const handleEditAccess = (access: Access) => {
    setSelectedAccess(access)
    setOpenAddEditDialog(true)
  }

  // 处理删除点击
  const handleDeleteClick = (access: Access) => {
    setAccessToDelete(access)
    setOpenDeleteDialog(true)
  }

  // 确认删除
  const handleConfirmDelete = () => {
    if (accessToDelete) {
      deleteAccess(accessToDelete.id)
      setOpenDeleteDialog(false)
      setAccessToDelete(undefined)
    }
  }

  // 添加或更新门禁
  const handleSaveAccess = (accessData: Omit<Access, 'id'>) => {
    if (selectedAccess) {
      // 更新现有门禁
      updateAccess(selectedAccess.id, accessData)
    } else {
      // 添加新门禁
      addAccess(accessData)
    }
    setOpenAddEditDialog(false)
  }

  return (
    <div className="space-y-6">
      <Card className="card-shadow">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-xl font-bold">门禁管理</CardTitle>
          <Button 
            onClick={handleAddAccess}
            className="rounded-lg bg-primary hover:bg-primary/90"
          >
            <Plus className="mr-2 h-4 w-4" /> 新增门禁
          </Button>
        </CardHeader>
        <CardContent>
          <p className="text-muted-foreground mb-4">管理系统中的门禁设备和权限。</p>
          <DataTable
            columns={columns({ onEdit: handleEditAccess, onDelete: handleDeleteClick })}
            data={accesses}
            pageSize={10}
            searchPlaceholder="搜索门禁(支持门禁名称、位置、类型等)"
          />
        </CardContent>
      </Card>

      <AccessDialog
        open={openAddEditDialog}
        onOpenChange={setOpenAddEditDialog}
        access={selectedAccess}
        onSave={handleSaveAccess}
      />

      <DeleteDialog
        open={openDeleteDialog}
        onOpenChange={setOpenDeleteDialog}
        onConfirm={handleConfirmDelete}
        title="删除门禁"
        description={`确定要删除门禁 "${accessToDelete?.name}" 吗？此操作无法撤销，且可能影响相关的权限配置。`}
     />
    </div>
  )
} 